/**
 * Created by Administrator on 2018/12/25.
 */
//全选挂一个change事件
$("#all").change(function(){
      if($(this).is(":checked")){
      //    勾选状态
          $('.check').prop('checked',true);
      }else{
          $('.check').prop('checked',false);
      }
})
//确认修改切换
$(".change").click (function(){
   change(this);

});
//修改函数
function change(el){
    var tr=$(el).parent().parent();
    if( $(el).text()==="修改") {
        $(el).text("确认");
        //    设置按钮的文字
        /* var tr = $(this).parent().parent();*/
        //选tr
        for (var i = 1; i < 4; i++) {
            //取到当前文子元素文字
            var str = tr.children().eq(i).text();
            //    新建一个input输入框，并且把取到的文字填充进去
            var input = $('<input type="text"/>');

            input.val(str);
            //    td里面的文字换成input

            tr.children().eq(i).html(input);
        }

    }

    else{
        for(var k=1;k<4;k++){
            //    取到tr下面的td的第K个元素下面的input的value值
            var _value=tr.children().eq(k).children().val();
            //    把取到的value值替换到td里面去
            tr.children().eq(k).html(_value);
        }

        $(el).text("修改");
    }
}

/*删除*/
//click触发每个匹配元素的click点击事件
$("#delBtn").click(function(){
    $('.check:checked').parents('tr').remove();
});
/*1.给增加按钮添加点击事件
* 2.取出用户输入的值
* 3。判断用户输入的表单是否完全
* 4.动态生成一份tr......td....
* 5.把生成出来的dom放到第一个table里面
* 6.重新给生成的DOM元素挂事件
* 7.把原来的表单清空*/
$("#addBtn").click(function(){
    var mingcheng=$('#goodsName').val();
    //取出名称
    var shuliang=$('#goodsNumber').val();
    //取出数量
    var danwei=$('#goodsUnit').val();
    //取出单位
    if(mingcheng === ""||shuliang ===""||danwei ===""){
        alert("请完整输入表单再提交");
        //弹窗提示
        return;
        //返回，避免代码继续往下执行
    }
    //首先生成一个 tr
    var tr =$('<tr></tr>');
    var td =$('<tr></tr>');
    var checkBox =$('<input type="checkbox" id="all"/>');
    checkBox.appendTo(td);
    //把多选框塞进TD里面去
    td.appendTo(tr);

    var td2 =$('<td></td>');
    td2.text(mingcheng);
    td2.appendTo(tr);

    var td3 =$('<td></td>');
    td3.text(shuliang);
    td3.appendTo(tr);

    var td4 =$('<td></td>');
    td4.text(danwei);
    td4.appendTo(tr);

    var td5 =$('<td></td>');
    var button=$('<button class="change">修改</button>');
    button.appendTo(td5);
    td5.appendTo(tr);

    tr.appendTo($('#mainTable'));
    console.log(tr);

    //清空
    $('#goodsName').val('');
    $('#goodsNumber').val('');
    $('#goodsUnit').val('');
});